<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-AR"><!-- InstanceBegin template="/Templates/tutorial.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>¿Qué es el maquetado HTML? - Tutorial Maquetado HTML</title>
<!-- InstanceEndEditable -->
<link rel="stylesheet" type="text/css" href="../css/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../css/screen-black-on-white.css" media="screen" title="Negro sobre blanco" />
<link rel="alternate stylesheet" type="text/css" href="../css/screen-white-on-black.css" media="screen" title="Blanco sobre negro" />
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
<meta name="author" content="Martin Alterisio &lt;malterisio777@gmail.com&gt;" />
<meta name="copyright" content="&copy; Martin Alterisio 2009" />
<link rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.5/ar/legalcode" />
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../js/tutorial.js"></script>
<!-- InstanceBeginEditable name="head" -->
<meta name="date" content="2009-10-30" />
<!-- InstanceEndEditable -->
</head>

<body>
<!-- InstanceBeginEditable name="body" -->
	<div class="navegacion">
		<div>
			<a href="../index.html">Inicio</a>
			<a href="index.html">Capítulo</a>
		</div>
	</div>
	<div id="contenido">
		<h1>Introducción al maquetado HTML</h1>
		<h2>¿Qué es el maquetado HTML?</h2>
		<p>Llamamos maquetado html a la disciplina que se dedica a la escritura y construcción de código html que principalmente respete la presentación adecuada de los contenidos y la <a class="termino-glosario" href="#arquitectura-de-la-informacion"><em>arquitectura de la información</em></a> del sitio a maquetar, y luego haga su mejor esfuerzo para adaptar esa presentación al diseño visual del sitio usando recursos gráficos y css.</p>
		<ol class="navegacion-contenidos">
			<li><a href="#distinguir-contenido-y-estilo">Distinguir contenido y estilo</a></li>
			<li><a href="#organizar-de-manera-adecuada-el-html">Organizar de manera adecuada el html</a></li>
			<li><a href="#aplicar-el-estilo-lo-mejor-posible">Presentar el contenido aplicando el estilo lo mejor posible</a></li>
		</ol>
		<h3 id="distinguir-contenido-y-estilo">Distinguir contenido y estilo</h3>
		<p>La primer tarea del maquetador es asegurarse que el html tenga los contenidos correctos y estos estén organizados adecuadamente. Para determinar cuáles son los contenidos correctos necesitamos discernir qué es contenido y qué es estilo visual. Aunque no es el escenario ideal, el maquetador por lo general trabaja a partir de la propuesta del diseñador gráfico, donde se mezcla y se confunde (generalmente) lo que es contenido y lo que es estilo visual.</p>
		<p>Por ejemplo, si la página a maquetar fuera algo parecido a lo siguiente: <img class="bloque" src="../imagenes/ejemplo-pagina-quienes-somos.jpg" alt="Ejemplo de página &quot;Quiénes Somos&quot;" /> por regla general todo lo que es texto es generalmente contenido, descartando obviamente todo estilo visual aplicado a ese texto (tipografía, color, tamaño, etc.). Luego debemos tomar cada pieza gráfica restante y hacernos las preguntas:</p>
		<ul>
			<li>¿esto agrega información a la página?</li>
			<li>¿qué tan importante es esta información en función de lo que comunica la página?</li>
		</ul>
		<p>Un ejercicio práctico para responder esto es tomar la pieza e imaginar el documento sin ella, por ejemplo si sacamos los firuletes del costado derecho lo que la página nos cuenta sigue siendo lo mismo. Los firuletes esos no nos informan nada nuevo, por ende son estilo, no son contenido.	Lo mismo sucede con otros ornamentos, como las líneas oblícuas que aparecen al pie de página.</p>
		<p>En cambio, si sacamos las fotos de las personas de la empresa, vamos a estar quitandole información a la página, ya que en ningún otro lado nos dice de manera visual como es la apariencia de la persona, y es información altamente relevamente al tema de la página (se trata de &quot;quiénes somos&quot; ¿no?).</p>
		<p>Veamos otro ejemplo: <img class="bloque" src="../imagenes/ejemplo-pagina-atencion-al-cliente.jpg" alt="Ejemplo de página &quot;Atención al Cliente&quot;" /> observen la pieza gráfica que acompaña al costado derecho, este es un ejemplo de una imagen que se utiliza como refuerzo del contenido que acompaña. La imagen esa no nos dice nada nuevo, solo nos muestra algo que se vincula con la idea de &quot;atención al cliente&quot; pero en un lenguaje gráfico.</p>
		<p> En este caso es pertinente catalogar esta pieza como estilo y no como contenido, en especial si la pieza gráfica es algo tan genérico que realmente no agrega valor al contenido (case típico: <a class="termino-glosario" href="#imagenes-de-stock"><em>imágenes de stock</em></a>). También cabe la posibilidad de que esta imagen no sea genérica, que, por ejemplo, haya en ella alguna vinculación con la imagen de la empresa, en cuyo caso deja de ser irrelevante, nos está contando algo más. En este caso es valido ponerla como parte del contenido.</p>
		<h3 id="organizar-de-manera-adecuada-el-html">Organizar de manera adecuada el html</h3>
		<p>Organizar de manera adecuada el html es una tarea aún más difícil que la anterior. Para esto tenemos que ser capaces de reconocer en el contenido la <a class="termino-glosario" href="#arquitectura-de-la-informacion"><em>arquitectura de la información</em></a>, las divisiones temáticas, la función o valor semántico de cada división, los <a class="termino-glosario" href="#niveles-de-lectura"><em>niveles de lectura</em></a>, la organización y estructura del contenido.</p>
		<p>Un error común es pensar la estructura de una página desde su organización visual, caso típico: dividir el documento en cabecera, contenido y pie. Aunque existen casos en que esta división sucede tanto en el lenguaje gráfico como en el contenido del documento, es más frecuente que suceda lo contrario.</p>
		<p>Volviendo a los ejemplos usados antes: <img class="bloque" src="../imagenes/ejemplo-pagina-quienes-somos.jpg" alt="Ejemplo de página &quot;Quiénes Somos&quot;" />en este caso es fácil notar la estructura del contenido central de la página (lo que lleva el título <q>Quiénes Somos</q>), pero lo que visualmente denominamos <em>cabecera</em> (el logo, nombre y menu) ¿es realmente una cabecera? Si así fuera, ésta sería la estructura del documento:</p>
		<pre>*cabecera*
	Nombre de la Empresa
		Logo
		Menu de navegación
*contenido*
	Quiénes Somos
		Jose Fernandez
			Foto de Jose
			Texto
		Carlos Rodriguez
			Foto de Carlos
			Texto</pre>
		<p>Haganse la pregunta: ¿cuál es el titular más importante (el que tiene el primer nivel de lectura)? ¿Es el <q>Nombre de la Empresa</q> o es <q>Quiénes somos</q>? En un sitio institucional, lo que nos contextualiza lo que nos dice de que vamos a hablar en la página es justamente el <q>Nombre de la Empresa</q>, por eso elegimos éste como nuestro nivel de lectura principal, y <q>Quiénes somos</q> es un nivel de lectura que desciende de éste. La estructura de nuestro documento sería:</p>
		<pre>Nombre de la Empresa
	Logo
	Menu de navegación
	Quiénes Somos
		Jose Fernandez
			Foto de Jose
			Texto
		Carlos Rodriguez
			Foto de Carlos
			Texto</pre>
		<p>La decisión de elegir la estructura más apropiada queda en el maquetador, todo depende de la situación particular del sitio y página a maquetar.</p>
		<h3 id="aplicar-el-estilo-lo-mejor-posible">Presentar el contenido aplicando el estilo lo mejor posible</h3>
		<p>Finalmente el maquetador tiene que  lograr presentar el contenido lo más cercano al estilo deseado. En otras palabras, el resultado final debe ser lo más cercano a la propuesta del diseñador gráfico en la medida que la tecnología lo permita y en la medida que esto no signifique modificar radicalmente el documento html.</p>
		<p>Por ejemplo, un diseñador puede querer usar una tipografía en todo el documento pero, para eso, o la tipografía tiene que estar disponible en el sistema del usuario, o tenemos que recurrir a tecnologías por fuera del html. La solución simple es tratar de ofrecer el documento lo mejor posible, para quienes tengan la tipografía lo vean con esa tipografía, y para los que no la tengan lo vean de una manera que siga siendo legible.</p>
		<p>En el tutorial vamos a seguir hablando sobre esto, en particular sobre algo que llamaremos <em lang="en">graceful degradation</em>, o <em>degradación elegante</em>.</p>
		<h3>Glosario</h3>
		<dl class="glosario">
			<dt id="arquitectura-de-la-informacion">Arquitectura de la información</dt>
				<dd>
					<p>Según la wikipedia:</p>
					<blockquote cite="http://es.wikipedia.org/wiki/Arquitectura_de_la_informaci%C3%B3n"><dfn>Arquitectura de la Información</dfn> es la disciplina encargada del estudio, análisis, organización, disposición y estructuración de la información en espacios de información, y de la selección y presentación de los datos en los sistemas de información interactivos y no interactivos.</blockquote>
				</dd>
			<dt id="imagenes-de-stock">Imágenes de stock</dt>
				<dd>
					<p>Imágenes sacadas de bancos de imágenes, fotos genéricas que se prepran según temáticas, escenarios y objetos presentes en la imagen.</p>
				</dd>
			<dt id="niveles-de-lectura">Niveles de lectura</dt>
				<dd>
					<p>Orden estructural de los textos donde cada parte de un documento está precedida, en uno o más niveles, por piezas que funcionan como introducción, contexto, y/o resumen del texto que preceden, por ejemplo, en un diario cada artículo está precedido por un titular (resumen de una línea) y un copete (resumen de un párrafo).</p>
				</dd>
		</dl>
	</div>
	<div class="navegacion">
		<a class="anterior" href="como-hago-para-crear-un-documento-html.html">Anterior</a>
		<a class="siguiente" href="que-es-el-hipertexto.html">Siguiente</a>
	</div>
<!-- InstanceEndEditable -->
	<div id="licencia">
		<p>Esta obra está bajo una licencia Reconocimiento-No comercial-Sin obras derivadas 2.5 Argentina de Creative Commons. Para ver una copia de esta licencia, visite <a href="http://creativecommons.org/licenses/by-nc-nd/2.5/ar/">http://creativecommons.org/licenses/by-nc-nd/2.5/ar/</a> o envie una carta a Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.</p>
	</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1794443-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
<!-- InstanceEnd --></html>
